<template>
	<view class="page pages">
		<view style="position: relative;">
			<view class="fund">
				<view>{{$t('mine.fund.Type')}}：{{type.title}}</view>
				<uni-icons :type="typeShow?'top':'bottom'" @click="typeShow=!typeShow"></uni-icons>
			</view>
			<view class="type" v-show="typeShow">
				<view v-for="item in typeList" :key="item.value" @click="typeClick(item)">{{item.title}}</view>
			</view>
		</view>
		<view class="content">
			<view class="title">
				<view>{{$t('mine.fund.Time')}}</view>
				<view>{{$t('mine.fund.Amount')}}</view>
				<view>{{$t('mine.fund.Description')}}</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" :key="item.id">
					<view>{{item.time_str}}</view>
					<view>{{item.money.slice(0,-1)}}</view>
					<view>{{item.memo}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { logSelect, userPriceLog } from '@/api/api.js'
	export default {
		data() {
			return {
				typeShow: false,
				page: 1,
				type: {},
				typeList: [],
				list: []
			};
		},
		onShow() {
			this.page = 1
			this.list = []
			logSelect({
				token: uni.getStorageSync('token'),
			}).then(res=>{
				this.typeList = res.data.data
				this.type = res.data.data[0]
				this.userPriceLog()
			})
			uni.setNavigationBarTitle({
				title: this.$t('list.Funk')
			})
		},
		onReachBottom(){
			this.page++
			this.userPriceLog()
		},
		methods: {
			typeClick(item){
				this.page = 1
				this.list = []
				this.type = item
				this.typeShow = false
				this.userPriceLog()
			},
			userPriceLog(){
				userPriceLog({
					token: uni.getStorageSync('token'),
					type: this.type.value,
					page: this.page
				}).then(res=>{
					if(res.data.data.data.length > 0){
						this.list = [...this.list, ...res.data.data.data]
					}else{
						this.page--;
						uni.showToast({
							title: this.$t('general.There'),
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	padding: 0 30rpx 40rpx;
	box-sizing: border-box;
}
.fund{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
	padding: 20rpx 0;
}
.type{
	background-color: #ccc;
	position: absolute;
	left: 0;
	right: 0;
	&>view{
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #fff;
	}
}
.content{
	margin-top: 40rpx;
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ccc;
		height: 80rpx;
		border-radius: 20rpx 20rpx 0 0;
		&>view{
			width: 33%;
			text-align: center;
		}
	}
	.list{
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			&>view{
				width: 33%;
				text-align: center;
			}
		}
		.item:nth-child(2n){
			background-color: #eee;
		}
	}
}
</style>
